<template>
  <!-- 导航栏 -->
  <div class="info_box">
    <van-nav-bar title="消息" @click-left="onClickLeft" />
    <van-row style="margin-top: 20px; margin-bottom: 20px">
      <div id="box" @click="showPraise">
        <div
          id="pic"
          style="background-color: rgb(250, 211, 211); margin-left: 38px"
        >
          <van-icon name="like" color="red" size="30px" />
        </div>
        <div id="span"><span>赞和收藏</span></div>
      </div>
      <div id="box" @click="showAttention">
        <div
          id="pic"
          style="background-color: rgb(173, 217, 253); margin-left: 38px"
        >
          <van-icon name="friends" color="blue" size="30px" />
        </div>
        <div id="span"><span>新增关注</span></div>
      </div>
      <div id="box">
        <div
          id="pic"
          style="background-color: rgb(188, 252, 172); margin-left: 38px"
        >
          <van-icon name="chat" color="green" size="30px" />
        </div>
        <div id="span"><span>评论和@</span></div>
      </div>
    </van-row>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item" @click="showChat(item.pid)">
          <div id="list">
            <!-- 头像 -->
            <div>
              <!-- <img src="https://img.yzcdn.cn/vant/cat.jpeg"> -->
              <van-image
                round
                width="40px"
                height="40px"
                :src="item.headUrl"
                id="head"
              />
            </div>
            <div id="info">
              <van-row>
                <van-col span="8px">{{ item.name }}</van-col>
                <!-- <van-col span="4px" offset="12">{{item.time}}</van-col> -->
              </van-row>
              <van-row>{{ item.news }}</van-row>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Chat",
  setup() {},
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  created() {
    this.getMessage();
  },

  methods: {
    //得到消息
    getMessage() {
      axios.get("/js/message.json").then((res) => {
        this.list = res.data.data;
        if (!localStorage.getItem("message")) {
          localStorage.setItem("message", JSON.stringify(this.list));
        }
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    showAttention() {
      this.$router.push("/attention");
    },
    showPraise() {
      this.$router.push("/praise");
    },
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        // for (let i = 0; i < 2; i++) {
        //   this.list.push(this.list.length + 1);
        // }
        this.loading = false;

        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;
      this.onLoad;
    },
    showChat(pid) {
      // console.log(pid);
      this.$router.push("/chat/" + pid);
    },
  },
};
</script>

<style scoped>
.info_box {
  margin-bottom: 50px;
}
#box {
  width: 33.3%;
  height: 90px;
  text-align: center;
}
#pic {
  width: 45px;
  height: 45px;
  line-height: 55px;
  border-radius: 15px;
}
#span {
  height: 20px;
  margin-top: 10px;
}
#list {
  height: 60px;
  display: flex;
}
#head {
  padding-top: 10px;
}
#info {
  width: 300px;
  padding-top: 10px;
  margin-left: 10px;
}
</style>